<template>
  <div>
    <div class="headers">
      <div class="buttons">
        <el-button type="success" icon="Search" @click="handleQuery" plain
          >搜索
        </el-button>
        <el-button icon="Download">导出当前页面筛查统计</el-button>
      </div>
      <div class="tips">仅统计已在本院做过TST检测的学校</div>
    </div>
    <div class="tables">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="headerCellStyle"
      >
      <el-table-column type="selection"/>
        <el-table-column label="序号" align="center" prop="id" />
        <el-table-column label="学校所在地" align="center" prop="depId" />
        <el-table-column label="学校全称" align="center" prop="checkpersonId" />
        <el-table-column label="筛查人类别" align="center" prop="createdTime" />
        <el-table-column label="学段" align="center" prop="updatedTime" />
        <el-table-column label="年级" align="center" prop="id" />
        <el-table-column label="实际招生人数" align="center" prop="depId" />
        <el-table-column label="系统内人数" align="center" prop="createdTime" />
        <el-table-column label="参与筛查率" align="center" prop="updatedTime" />
        <el-table-column label="线上问诊" align="center" prop="id">
          <el-table-column label="问诊人数" align="center" prop="" />
          <el-table-column label="问诊率" align="center" prop="" />
          <el-table-column
            label="有肺结核可以症状人数"
            align="center"
            prop=""
          />
          <el-table-column
            label="与肺结核患者密接人数"
            align="center"
            prop=""
          />
        </el-table-column>
        <el-table-column label="TST(IGRA)检测" align="center" prop="id">
          <el-table-column label="TST(IGRA)检测人数" align="center" prop="" />
          <el-table-column label="TST(IGRA)检测率" align="center" prop="" />
          <el-table-column label="TB-PPD实验" align="center" prop="date">
            <el-table-column label="阴性" align="center" prop="" />
            <el-table-column label="一般阳性" align="center" prop="" />
            <el-table-column label="中度阳性" align="center" prop="" />
            <el-table-column label="强阳性" align="center" prop="" />
          </el-table-column>
          <el-table-column label="EC实验" align="center" prop="date">
            <el-table-column label="阴性" align="center" prop="" />
            <el-table-column label="阳性" align="center" prop="" />
            <el-table-column label="强阳性" align="center" prop="" />
          </el-table-column>
          <el-table-column label="TST检测超时为判定" align="center" prop="id" />
          <el-table-column label="IGRA检测" align="center" prop="date">
            <el-table-column label="阴性" align="center" prop="" />
            <el-table-column label="阳性" align="center" prop="" />
          </el-table-column>
          <el-table-column
            label="TST(IGRA)未检测人数"
            align="center"
            prop="depId"
          />
          <el-table-column
            label="TST(IGRA)阳性率"
            align="center"
            prop="checkpersonId"
          />
          <el-table-column label="潜伏感染率" align="center" prop="depId" />
        </el-table-column>
        <el-table-column label="X线胸片检查" align="center" prop="date">
          <el-table-column label="胸片检查人数" align="center" prop="" />
          <el-table-column label="未见异常" align="center" prop="" />
          <el-table-column label="异常" align="center" prop="" />
        </el-table-column>
        <el-table-column
          label="(疑似)活动性肺结核人数"
          align="center"
          prop="depId"
        />
        <el-table-column
          label="患结核病率"
          align="center"
          prop="checkpersonId"
        />
        <el-table-column
          label="应预防性治疗人数"
          align="center"
          prop="createdTime"
        />
        <el-table-column
          label="预防性治疗人数"
          align="center"
          prop="updatedTime"
        />
        <el-table-column label="预防性治疗率" align="center" prop="id" />
        <el-table-column label="治疗方案" align="center" prop="date">
          <el-table-column label="化学药物人数" align="center" prop="" />
          <el-table-column label="免疫治疗人数" align="center" prop="" />
          <el-table-column label="异常" align="center" prop="" />
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup name="checktotal">
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: '123456',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
const handleQuery = () => {
  console.log('handleQuery')
}
//颜色填充
const headerCellStyle = ({ column }) => {
  if (
    column.label === '参与筛查率' ||
    column.label === '问诊率' ||
    column.label === 'TST(IGRA)检测人数' ||
    column.label === 'TST(IGRA)检测率' ||
    column.label === 'TST(IGRA)阳性率' ||
    column.label === '潜伏感染率' ||
    column.label === '结核患病率' ||
    column.label === '应预防性治疗人数' ||
    column.label === '预防性治疗人数' ||
    column.label === '预防性治疗率'
  ) {
    // 颜色可以改 背景颜色不能改 是因为若依框架将本项目的表头样式改了，我们加一个!important就可以覆盖他改的样式
    return {
      background: '#fce4d3 !important', // 红色背景
    }
  } else if (column.label === 'TST(IGRA)检测') {
    return {
      background: '#e3f2d9 !important', // 绿色背景
    }
  } else if (column.label === 'X线胸片检查') {
    return {
      background: '#d2f4f2 !important',
    }
  } else if (column.label === '治疗方案') {
    return {
      background: '#fadade !important',
    }
  }
}
</script>

<style scoped>
.headers {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.buttons {
  margin-right: 20px;
}

.tables {
  padding: 20px;
}

.tips {
  padding: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #eaab5a;
  line-height: 35px;
  background-color: #fdf6ec;
}
</style>
